<template>
  <div>
    <button @click="modalOpen = true">打开一个对话框</button>

    <!-- 对话框代码 -->
    <!-- Teleport 提供了一种干净的方法, 让组件的html在父组件界面外的特定标签(很可能是body)下插入显示 -->
    <Teleport to="body">
      <div v-if="modalOpen">
        <div>这是对话框</div>
        <button @click="modalOpen = false">关闭对话框</button>
      </div>
    </Teleport>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "ModalButton",
  setup() {
    // 控制对话框显示或者隐藏的
    const modalOpen = ref(false);
    return { modalOpen };
  },
});
</script>